// Accordion.tsx
import styled from "@emotion/styled"
import { useAtom } from "jotai"
import { motion, AnimatePresence } from "motion/react"
import { activePanelAtom, helpActiveIndexAtom } from "../atom"

// 定义 Accordion 项的类型
interface AccordionItem {
    title: string
    content: string
}

interface AccordionProps {
    items: AccordionItem[]
    sectionIndex: number // 用于区分不同的 Accordion 实例
    activeIndex: number //当前点击的icon
}

const AccordionContainer = styled.div`
    display: flex;
    flex-direction: column;
    padding: 12rem 12rem 0;
`

const AccordionItem = styled.div`
    /* margin-bottom: 10rem; */
    background-color: #fff;
    border-radius: 8rem;
    overflow: hidden;
`

interface isActive {
    isActive: boolean
}
const AccordionHeader = styled.div<isActive>`
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 327rem;
    padding: 15rem;
    font-family: "Gilroy";
    font-weight: 400;
    font-size: 16rem;
    letter-spacing: 0%;
    cursor: pointer;
    margin: 0 auto;
    border-bottom: ${({ isActive }) => (isActive ? "1px solid rgba(28, 30, 33, 0.25)" : "none")};
`

const AccordionContent = styled(motion.div)`
    padding: 0 15rem;
    overflow: hidden;
`

const AccordionText = styled.div`
    font-size: 14rem;
    color: #3e4046;
    line-height: 1.5;
    padding: 5rem 0;
    font-family: "Gilroy";
    font-weight: 400;
`

const ArrowIcon = styled(motion.div)<isActive>`
    width: 10rem;
    height: 10rem;
    border: 1rem solid #333;
    border-width: 0 2px 2px 0;
    margin-top: ${({ isActive }) => (isActive ? "4rem" : "-5rem")};
`

const Accordion: React.FC<AccordionProps> = ({ items, sectionIndex, activeIndex }) => {
    const [activePanel, setActivePanel] = useAtom(activePanelAtom)
    const [helpActiveIndex] = useAtom(helpActiveIndexAtom)

    const toggleAccordion = (panelIndex: number) => {
        // 如果点击的是当前展开的面板，则关闭它
        if (
            activePanel &&
            activePanel.sectionIndex === sectionIndex &&
            activePanel.panelIndex === panelIndex
        ) {
            setActivePanel(null)
        } else {
            // 否则，展开新面板（自动关闭其他面板）
            setActivePanel(null)
            setActivePanel({ sectionIndex, panelIndex })
        }
    }

    return (
        <AccordionContainer>
            {items.map((item, panelIndex) => {
                // 判断当前面板是否展开
                const isOpen =
                    activePanel?.sectionIndex === sectionIndex &&
                    activePanel?.panelIndex === panelIndex

                return (
                    <AccordionItem key={panelIndex}>
                        <AccordionHeader
                            isActive={activePanel?.panelIndex === panelIndex}
                            onClick={() => toggleAccordion(panelIndex)}
                        >
                            {item.title}
                            <ArrowIcon
                                isActive={isOpen}
                                animate={{ rotate: isOpen ? -135 : 45 }}
                                transition={{ duration: isOpen ? 0.3 : 0 }}
                            />
                        </AccordionHeader>
                        <AnimatePresence>
                            {isOpen && (
                                <AccordionContent
                                    initial={{ height: 0, opacity: 0 }}
                                    animate={{ height: "auto", opacity: 1 }}
                                    exit={{ height: 0, opacity: 0 }}
                                    transition={{ duration: 0.3 }}
                                >
                                    <AccordionText
                                        dangerouslySetInnerHTML={{
                                            __html: item.content,
                                        }}
                                    ></AccordionText>
                                </AccordionContent>
                            )}
                        </AnimatePresence>
                    </AccordionItem>
                )
            })}
        </AccordionContainer>
    )
}

export default Accordion
